<script>
import KtTable from "/src/components/node-kantboot/components/KtTable/KtTable.vue";
import columns from "./config/columns.config.js"
import i18nEditDialog from "./components/I18nEditDialog.vue";
import KtTableDialogOfSave from "/src/components/node-kantboot/components/KtTable/KtTableDialogOfSave.vue";
import DialogOfSave from "/src/views/manage/shop/goodType/components/DialogOfSave.vue";
import DialogOfEdit from "/src/views/manage/shop/goodType/components/DialogOfEdit.vue";
import DialogOfBindService from "/src/views/manage/shop/goodType/components/DialogOfBindService.vue";

export default {
  components: {DialogOfEdit, DialogOfSave, KtTableDialogOfSave, KtTable, i18nEditDialog,DialogOfBindService},
  data() {
    return {
      columns,
      bodyData: [],
      list:[],
      requestParam:{
        projectCode: null
      }
    }
  },
  mounted() {
    // 获取参数projectCode
    let projectCode = this.$route.query.projectCode;
    if(projectCode){
      this.requestParam.projectCode = projectCode;
    }
    this.getAll();
  },
  methods: {
    bindService(row) {
      this.$refs.dialogOfBindService.open(row);
    },
    toI18nEdit(row) {
      this.$refs.i18nEditDialog.open(row);
    },
    deleteItem(id) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$kt.request.send({
          uri: "/business-shop-web/admin/shopGoodsType/remove",
          data: {id},
          stateSuccess: () => {
            this.getAll();
          }
        });
      }).catch(() => {
      });
    },
    getAll() {
      this.$kt.request.send({
        uri: "/business-shop-web/admin/shopGoodsTypeDP/getAllNew",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.bodyData = res.data;
          this.list = [];
          // 将所有parent_id为空的数据放到list中
          for (let i = 0; i < this.bodyData.length; i++) {
            if (!this.bodyData[i].parentId) {
              this.list.push(this.bodyData[i]);
            }
          }

          // 获取所有的子分类，放进list的children中
          for (let i = 0; i < this.list.length; i++) {
            this.list[i].children = [];
            for (let j = 0; j < this.bodyData.length; j++) {
              if (this.list[i].id === this.bodyData[j].parentId) {
                this.list[i].children.push(this.bodyData[j]);
              }
            }
          }

          this.contentLoading = false;
        }
      });
    }
  }
}
</script>

<template>

  <dialog-of-save
      :columns="columns"
      :projectCode="requestParam.projectCode"
      requestUri="/business-shop-web/admin/shopGoodsTypeDP"
      ref="dialogOfSave"
      @saveSuccess="getAll()"
  ></dialog-of-save>

  <dialog-of-edit
  :columns="columns"
  requestUri="/business-shop-web/admin/shopGoodsTypeDP"
  ref="dialogOfEdit"
  :projectCode="requestParam.projectCode"
  @saveSuccess="getAll()"
  ></dialog-of-edit>

  <!-- 新增按钮 -->
    <el-button @click="$refs.dialogOfEdit.open()"
               type="primary"
    style="position: fixed; right: 20px; top: 20px;"
    >新增</el-button>

  <div class="card-box">
    <div class="card"
         v-for="item in list">
      <div style="height: 10px"></div>
      <div class="card-img-box">
        <el-image :src="$kt.file.visit(item.fileIdOfIcon)"
        class="card-img"
        />
      </div>
      <div class="card-title">{{item.name}}</div>
      <div style="text-align: right">
        <div
            class="text-btn"
            @click="bindService(item)">绑定客服</div>

        <div
            class="text-btn"
            @click="toI18nEdit(item)">国际化管理</div>
        <!-- 编辑 -->
        <div
            class="text-btn"
            @click="$refs.dialogOfEdit.open(item)">编辑</div>
        <!-- 删除 -->
        <div
            class="text-btn"
            style="color:#ff0000"
            @click="deleteItem(item.id)">删除</div>
      </div>

      <div class="line"></div>
      <el-scrollbar style="height: 200px;">

      <div class="card-body">
        <div v-for="child in item.children"
          class="card-box-box">
          <div class="card-box-box-name">
            {{child.name}}
          </div>
          <!-- 删除和编辑按钮 -->
          <div style="text-align: right">
            <div
                class="text-btn"
                @click="toI18nEdit(child)">国际化管理</div>
            <!-- 编辑 -->
            <div
                class="text-btn"
                @click="$refs.dialogOfSave.open(child.id)">编辑</div>
            <!-- 删除 -->
            <div
                class="text-btn"
                style="color:#ff0000"
                @click="deleteItem(child.id)">删除</div>
          </div>
        </div>
      </div>
      </el-scrollbar>
      <div
          @click="$refs.dialogOfSave.open(item.id)"
          class="card-bottom">
        添加子分类
      </div>
    </div>
  </div>


  <i18n-edit-dialog ref="i18nEditDialog"></i18n-edit-dialog>
  <dialog-of-bind-service
  ref="dialogOfBindService"
  ></dialog-of-bind-service>
</template>

<style lang="scss" scoped>
.card-box {
  text-align: center;
  .card {
    width: 300px;
    display: inline-block;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    margin: 10px;
    .card-title {
      padding: 10px 0 5px 0;
      font-weight: bold;
      background-color: #FFFFFF;
    }
    .card-body {
      padding: 10px;
      background-color: #fff;

      .card-box-box{
        padding: 10px;
        border-bottom: 1px solid #ebeef5;

        .card-box-box-name{
          font-size: 14px;
        }

      }
    }

    .card-bottom{
      padding: 10px;
      border-radius: 0 0 10px 10px;
      cursor: pointer;
      color: #FFFFFF;
      background-color: #606266;
    }

    .card-bottom:hover{
      background-color: #909399;
    }

    .card-bottom:active{
      background-color: #303133;
    }
  }
}

.line{
  height: 1px;
  background-color: #ebeef5;
}

.text-btn{
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  color: #666666;
  font-size: 10px;
  margin-right: 10px;
}

.card-img-box{
  .card-img{
    border-radius: 50px;
    width: 60px;
    height: 60px;
  }
}
</style>